<template>
  <!-- 输入框 -->
  <a-input
    v-if="type === FormItemType.INPUT"
    v-model:value="innerValue"
    :placeholder="placeholder as string"
    :disabled="disabled"
    :allow-clear="allowClear"
    v-bind="customProps"
  />

  <!-- 密码输入框 -->
  <a-input-password
    v-else-if="type === FormItemType.INPUT_PASSWORD"
    v-model:value="innerValue"
    :placeholder="placeholder as string"
    :disabled="disabled"
    :allow-clear="allowClear"
    v-bind="customProps"
  />

  <!-- 数字输入框 -->
  <a-input-number
    v-else-if="type === FormItemType.INPUT_NUMBER"
    v-model:value="innerValue"
    :placeholder="placeholder as string"
    :disabled="disabled"
    :min="min"
    :max="max"
    :step="step"
    style="width: 100%"
    v-bind="customProps"
  />

  <!-- 多行文本 -->
  <a-textarea
    v-else-if="type === FormItemType.TEXTAREA"
    v-model:value="innerValue"
    :placeholder="placeholder as string"
    :disabled="disabled"
    :rows="rows || 4"
    :allow-clear="allowClear"
    v-bind="customProps"
  />

  <!-- 下拉选择框 -->
  <a-select
    v-else-if="type === FormItemType.SELECT"
    v-model:value="innerValue"
    :placeholder="placeholder as string"
    :disabled="disabled"
    :options="options"
    :mode="mode as any"
    :allow-clear="allowClear"
    style="width: 100%"
    v-bind="customProps"
  />

  <!-- 树形选择框 -->
  <a-tree-select
    v-else-if="type === FormItemType.TREE_SELECT"
    v-model:value="innerValue"
    :placeholder="placeholder as string"
    :disabled="disabled"
    :tree-data="treeData as any[]"
    :field-names="fieldNames"
    :allow-clear="allowClear"
    style="width: 100%"
    v-bind="customProps"
  />

  <!-- 单选框组 -->
  <a-radio-group
    v-else-if="type === FormItemType.RADIO_GROUP"
    v-model:value="innerValue"
    :disabled="disabled"
    v-bind="customProps"
  >
    <a-radio
      v-for="opt in options"
      :key="opt.value"
      :value="opt.value"
      :disabled="opt.disabled"
    >
      {{ opt.label }}
    </a-radio>
  </a-radio-group>

  <!-- 复选框组 -->
  <a-checkbox-group
    v-else-if="type === FormItemType.CHECKBOX_GROUP"
    v-model:value="innerValue"
    :disabled="disabled"
    :options="options"
    v-bind="customProps"
  />

  <!-- 开关 -->
  <a-switch
    v-else-if="type === FormItemType.SWITCH"
    v-model:checked="innerValue as boolean"
    :disabled="disabled"
    v-bind="customProps"
  />

  <!-- 日期选择器 -->
  <a-date-picker
    v-else-if="type === FormItemType.DATE_PICKER"
    :value="handleDateValue(innerValue)"
    @update:value="updateValue"
    :placeholder="placeholder as string"
    :disabled="disabled"
    style="width: 100%"
    v-bind="customProps"
  />

  <!-- 日期范围选择器 -->
  <a-range-picker
    v-else-if="type === FormItemType.RANGE_PICKER"
    :value="handleRangeValue(innerValue)"
    @update:value="updateValue"
    :placeholder="isStringArray(placeholder) ? placeholder : undefined"
    :disabled="disabled"
    style="width: 100%"
    v-bind="customProps"
  />

  <!-- 上传 -->
  <a-upload
    v-else-if="type === FormItemType.UPLOAD"
    :file-list="innerValue as any"
    @update:file-list="updateValue"
    :disabled="disabled"
    v-bind="customProps"
  />

  <!-- 自定义插槽 -->
  <slot
    v-else-if="type === FormItemType.SLOT"
    :name="slotName"
    :field-value="innerValue"
    :form-data="formData"
  ></slot>
</template>

<script lang="ts" setup>
import { FormItemType } from '@/types/component/form'
import { computed } from 'vue'

defineOptions({
  name: 'FormItemRender'
})

// Props定义
const props = defineProps<{
  type: FormItemType
  modelValue?: string | number | boolean | object | any[]
  placeholder?: string | string[]
  options?: Array<{ label: string; value: any; disabled?: boolean }>
  treeData?: any[]
  disabled?: boolean
  min?: number
  max?: number
  step?: number
  rows?: number
  allowClear?: boolean
  mode?: string
  fieldNames?: Record<string, string>
  slotName?: string
  formData?: Record<string, any>
  props?: Record<string, any>
}>()

// 辅助函数：检测字符串数组类型
const isStringArray = (value: any): value is string[] => {
  return Array.isArray(value) && value.every(item => typeof item === 'string')
}

// 创建自定义属性对象（排除已使用的属性避免重复）
const customProps = computed(() => {
  // 这里返回props.props，避免与已经显式声明的属性冲突
  return props.props || {}
})

// Emits定义
const emit = defineEmits<{
  'update:modelValue': [value: any]
}>()

// 创建计算属性作为中间层处理双向绑定
const innerValue = computed<any>({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value)
  }
})

// 处理日期组件的特殊类型
const handleDateValue = (value: any) => {
  if (!value) return undefined
  return value
}

// 处理范围选择器的值
const handleRangeValue = (value: any) => {
  if (!value) return undefined
  return value
}

// 更新值
const updateValue = (value: any) => {
  emit('update:modelValue', value)
}
</script> 